<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px;">
      <a-breadcrumb-item>部门管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- <a-row class="pd20 mt20">
      <a-col :span="6">
        部门名：
        <a-input placeholder="请输入"
                 v-model="queryForm.deptName" />
      </a-col>
      <a-col :span="4">
        <a-button type="primary"
                  @click="getList">
          查询
        </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row> -->
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>  部门列表 </div>
        <div class="title-dep">
          <!-- <a-col > 部门名： <a-input placeholder="请输入" v-model="queryForm.deptName" /></a-col>
          <a-col >
            <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
            <a-button @click="cleanQuery">重置</a-button> &emsp;&nbsp; -->
            <a-button type="primary" @click="addFn" v-hasPermi="['dept:add']">添加</a-button>
          </a-col>
        </div>
        
      </div>
      <a-spin :spinning="loading">
        <a-table :scroll="{ x: 500 }"
                 childrenColumnName="childList"
                 :columns="columns"
                 :data-source="tableData"
                 :pagination="false">
          <a slot="name"
             slot-scope="text">{{ text }}</a>
          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
          <span slot="action"
                slot-scope="text, record">
            <a @click="addFn(text,record)"
               v-hasPermi="['dept:add']">新增</a>
            <a-divider type="vertical" />
            <a @click="editFn(text,record)"
               v-hasPermi="['dept:edit']">修改</a>
            <a-divider type="vertical" />
            <a @click="delFn(text,record)"
               class="red"
               v-hasPermi="['dept:del']">删除</a>
          </span>
        </a-table>
        <!-- <div class="page_box">
          <a-pagination v-model="queryForm.offset"
                        :page-size-options="[ '20', '30', '40', '50']"
                        :total="total"
                        show-size-changer
                        :page-size="queryForm.current"
                        @showSizeChange="onShowSizeChange"
                        @change="pageChange"></a-pagination>
        </div> -->
      </a-spin>
    </a-row>
    <a-modal title="部门配置"
             :visible="dialogVisible"
             width="38%"
             ok-text="确认"
             cancel-text="取消"
             @cancel="dialogVisible = false"
             @ok="putDict">
      <a-form :form="form">
        <a-form-item :label-col="formItemLayout.labelCol"
                     :wrapper-col="formItemLayout.wrapperCol"
                     label="部门名称">
          <a-input v-decorator="['deptName', { rules: [{ required: true, message: '请输入部门名称' }] }]"
                   placeholder="请输入部门名称" />
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol"
                     :wrapper-col="formItemLayout.wrapperCol"
                     label="排序">
          <a-input-number v-decorator="['orderNum', { rules: [{ required: true, message: '请输入排序' }] }]"
                          placeholder="请输入排序" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import { message } from 'ant-design-vue'
export default {
  data() {
    return {
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      id: null,
      parentId: null,
      tableData: [],
      columns: [
        {
          title: '部门名称',
          dataIndex: 'deptName',
          key: 'deptName',
        },
        {
          title: '部门领导',
          dataIndex: 'leader',
          key: 'leader',
        },
        {
          title: '部门人数',
          dataIndex: 'orderNum',
          key: 'remark',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const url = '/government-platform-center/dept'
      const params = this.queryForm
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data
            this.total = res.data.total
            this.loading = false
            this.getOther(this.tableData)
          }
        })
    },
    cleanQuery() {
      this.queryForm = {}
      this.getList()
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize
      this.getList()
    },
    pageChange(current) {
      this.queryForm.offset = current
      this.getList()
    },
    getOther(list) {
      list.forEach((item, index) => {
        item = { ...item, ...item.thisData }
        item['key'] = item.id
        if (item.childList.length == 0) {
          item.childList = null
        }
        this.$set(list, index, item)
        if (item.childList && item.childList.length > 0) {
          this.getOther(item.childList)
        }
      })
    },
    delFn(text, record) {
      console.log(text, record)
      const that = this
      Modal.confirm({
        title: '确认删除',
        content: '您确定要删除这项内容吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          const url = `/government-platform-center/dept/deleteById?id=${text.id}`
          that.$axios.post(url).then((res) => {
            if (res.data.code == 0) {
              that.getList()
              message.success('操作成功')
            }
          })
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log('删除已取消')
        },
      })
    },
    addFn(text, record) {
      if (text) {
        this.parentId = text.id
      } else {
        this.parentId = null
      }
      console.log(this.parentId, 'this.parentId1')
      this.dialogVisible = true
      this.form.resetFields()
      this.id = null
    },
    editFn(text, record) {
      this.dialogVisible = true
      const url = `/government-platform-center/dept/${text.id}`
      this.id = text.id
      const params = this.queryForm
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.form.setFieldsValue(res.data.data)
          }
        })
    },
    putDict() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        if (!this.id) {
          const url = '/government-platform-center/dept'
          const form = { ...values, parentId: this.parentId || 0 }
          this.$axios
            .post(url, form, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.getList()
                this.reSetForm()
                this.dialogVisible = false
                message.success('操作成功')
              }
            })
        } else {
          const form = { ...values, id: this.id }
          const url = '/government-platform-center/dept/edit'
          this.$axios
            .post(url, form, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.getList()
                this.reSetForm()
                this.dialogVisible = false
                message.success('操作成功')
              }
            })
        }
      })
    },
    reSetForm() {
      // this.form = { dictName: null, dictType: null, remark: null }
    },
  },
}
</script>

<style lang="scss" scoped>
.title-dep{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.ant-row {
  border-radius: 5px;

  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>
